<html>
    <head>
        <title>Test</title>
        <style>

main { size:*; }

vlist {border:2dip solid #ccc; background:#fff;}
vlist > li { line-height:1.8em; border-left:0.5em solid transparent; }
vlist > li:current { background:highlight; color: highlighttext; }
vlist > li:checked { border-color:red; }

        </style>
        <script type="text/tiscript">

include "vlist.tis";

function recordsGeneratorA() {
  var out = [];
  for(var i in 1000) out.push {key:"A" + i.toString()};
  return out;
}

function recordsGeneratorB() {
  var out = [];
  for(var i in 500) out.push {key:"B" + i.toString()};
  return out;
}

var recordsA = recordsGeneratorA();
var recordsB = recordsGeneratorB();

class Main : Reactor.Component {

  this var vlist;
  this var records = recordsA;

  function renderRecord(record,index) {
    return <li key={record.key} 
       :current={this.currentRecord===record} 
       :checked={this.isSelected(record)}>item #{index} of key {record.key}.</li>;
  }

  function render() {
    return <main>  
      <form>
        <div>Record <input|integer #record-number min="0" max="1000" novalue="#" step="10" /> <button#go>Go</button></div>
        <div>Recordset <button|radio(rs) value="A" checked>first</button> or <button|radio(rs) value="B">second</button></div>
      </form>
      <VList
        multiselect
        recordset={this.records}
        recordview={renderRecord}
        @{this.vlist} />
    </main>;
  }

  event click $(#go) {
    var rn = this.$(#record-number).value;
    this.vlist.navigateTo(this.records[rn]);
  }

  event change $(button[name=rs]) (e,button)  {
    if(button.attributes["value"] == "B")  
      this.update { records: recordsB };
    else 
      this.update { records: recordsA };
  }


}

        </script>
    </head>
    <body>
      <p>Demo of simple virtual list component &lt;VList>.</p>
      <p>The caller shall suply record view producer function.</p>
      <p>The list supports multiselection (CTRL+CLICK).</p>

      <reactor|Main />


      
    </body>
</html>